<template>
  <div class="twitter">
    <div class="twitter-row twitter-content mb-4 shadow-sm">
      <breadcrumb :navigation="navigation"></breadcrumb>
      <ul class="twitter-ul">
        <li v-for="item in quotations"
            :key="item.id">
          <div class="wrapper">
              <img v-lazy="item.avatar"/>
            <div>
              <span class="author">{{item.nickName}}</span>
              <span class="time">{{item.createTime}}</span>
            </div>
          </div>
          <div class="wrapper">
            <p class="content">{{item.content}}</p>
          </div>
        </li>
      </ul>
      <b-col v-if="quotations.length === 0" cols="12" style="height: 600px;">
        <not-searching :isShow="true" :type="contentType" />
      </b-col>
    </div>
    <div class="twitter-row w-100 mb-4 shadow-sm" v-if="quotations.length > 0">
      <b-col cols="12" class="d-none d-sm-block">
        <pagination class="pagination" :query="query" @page="handlePage" />
      </b-col>
      <b-col cols="12" class="d-sm-none d-block">
        <mobile-pagination :query="query" @page="handlePage" />
      </b-col>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '../../components/Breadcrumb'
import Pagination from '../../components/Pagination'
import MobilePagination from '../../components/MobilePagination'
import NotSearching from '../../components/NotSearching'
import { list } from '@/api/twitter'

export default {
  name: 'Twitter',
  data () {
    return {
      navigation: '> 心语',
      contentType: 'loading',
      query: {
        current: 1,
        size: 10
      },
      quotations: []
    }
  },
  computed: {
    newCurrent () {
      return this.query.current
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 获取说说列表
    getList () {
      this.contentType = 'loading'
      list(this.query).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          var data = response.data.data
          // 说说数据
          this.quotations = data.records
          // 总数据量
          this.query.total = data.total
          // 总页数
          this.query.pages = data.pages
          if (this.query.total === 0) {
            this.contentType = 'noData'
          }
        } else {
          this.$notify({
            title: '来自远程服务器的提示',
            message: '非常抱歉，服务器生病了，管理员正在帮它治病，请耐心等候~',
            type: 'error'
          })
        }
      })
    },
    handlePage (query) {
      this.query = query
      this.getList()
    }
  },
  watch: {
    // 当前页发生变化时，请求数据
    newCurrent (newValue, oldValue) {
      this.getList()
    }
  },
  components: {
    Breadcrumb,
    Pagination,
    MobilePagination,
    NotSearching
  }
}
</script>

<style scoped lang="stylus">
  .twitter
    .twitter-row
      opacity 0.9
      background #fff
    .twitter-content
      display flex
      flex-flow column
      height fit-content
      padding 20px 20px 10px 20px
      .twitter-ul
        margin 0 2px
        li
          display block
          display flex
          flex-flow column
          padding 18px 20px 24px 0
          border-bottom 1px solid #f2f2f2
          .wrapper
            display flex
            flex-flow row
            img
              border-radius 50%
              -webkit-border-radius 50%
              -moz-border-radius 50%
              width 40px
              height 40px
            div
              display flex
              flex-flow column
              margin-left 10px
              .author
                white-space nowrap
                overflow hidden
                -ms-text-overflow ellipsis
                text-overflow ellipsis
                font-size 14px
                font-weight bold
              .time
                padding-top 4px
                font-size 12px
                color #888
            .content
              margin 18px 0 0 4px
        li:last-child
          border-bottom none
      .pagination
        margin 10px 10px 14px 0
</style>
